<script setup>
import { gameStateStore, boardOpenOrCloseStore } from '@/stores'
import { watch, ref } from 'vue'
const gameStateStore1 = gameStateStore()
const boardOpenOrCloseStore1 = boardOpenOrCloseStore()
const time1 = ref(null)

const randomArray = ref([])
let score = 0
const getRandomList = () => {
  //得到30个不相邻重复随机数（0~8）成的数组
  randomArray.value = Array.from({ length: 61 }, () => Math.floor(Math.random() * 9))
}
const handleMouseClick = () => {
  score = score + 1
  console.log('加分')
  gameStateStore1.changeScoreAndMessage('您当前的分数为：' + score)
}
const handleCountDownFn = (countTime = 60) => {
  console.log('开始执行倒计时函数')
  getRandomList()
  console.log(randomArray.value)
  const countDownElement = document.querySelector('.header-countdown span')
  countDownElement.innerHTML = countTime
  const currentRandomListIndex = ref(1)
  //首个出现的老鼠
  let firstIndex = randomArray.value[0]
  let oldEl = firstIndex
  const mouseElements = document.querySelectorAll('.mouse')
  mouseElements[firstIndex].style.display = 'block'
  mouseElements[firstIndex].addEventListener('click', handleMouseClick)
  time1.value = setInterval(() => {
    countDownElement.innerHTML--

    if (countDownElement.innerHTML % gameStateStore1.speed === 0) {
      const newEl = randomArray.value[currentRandomListIndex.value]
      console.log('移除' + oldEl)
      // 移除旧元素的事件监听器
      mouseElements[oldEl].style.display = 'none'
      mouseElements[oldEl].removeEventListener('click', handleMouseClick)

      // 添加新元素的事件监听器
      mouseElements[newEl].style.display = 'block'
      mouseElements[newEl].addEventListener('click', handleMouseClick)

      currentRandomListIndex.value++
      oldEl = newEl
    }
    console.log('值' + parseInt(countDownElement.innerHTML))
    if (parseInt(countDownElement.innerHTML) <= 0) {
      //更新成绩
      gameStateStore1.changeFinalScore(score)
      if (score > gameStateStore1.highestScore) {
        gameStateStore1.changeHighestScore(score)
      }
      // 弹出弹窗，告知完成
      boardOpenOrCloseStore1.changeFinalBoard(true)
      //倒计时结束，进行清理工作
      clearInterval(time1.value)
      gameStateStore1.changeState() //结束才能更改游戏状态
      gameStateStore1.changeCountDownState(0)
      gameStateStore1.changePaused(0) //把倒计时复原为false
      gameStateStore1.changeScoreAndMessage('快开始游戏吧')
      gameStateStore1.changeStopMusicModelChange(false)
    }
  }, 1000)
}

watch(
  () => gameStateStore1?.countDown,
  (newV) => {
    console.log('看看是哪种倒计时')
    console.log(newV)
    if (newV === 1) {
      console.log('倒计时开始')
      gameStateStore1.changeScoreAndMessage('您当前的分数为：0')
      score = 0
      handleCountDownFn()
    } else if (newV >= 2) {
      console.log('暂停了')
      const countDownElement = document.querySelector('.header-countdown span')
      handleCountDownFn(parseInt(countDownElement.innerHTML))
    }
  },
)
watch(
  () => gameStateStore1?.isPaused,
  () => {
    console.log('重新玩或暂停倒计时都改pause')
    if (time1.value) {
      console.log('删除定时器')
      clearInterval(time1.value)
    }
  },
)
</script>
<template>
  <div class="content-header">
    <div class="zhuzi">
      <div></div>
      <div></div>
    </div>
    <div class="header-countdown"><span>0</span> <span>s</span></div>
    <div class="zhuzi">
      <div></div>
      <div></div>
    </div>
    <div class="header-score-message">{{ gameStateStore1.scoreAndMessage }}</div>
  </div>
</template>
<style lang="less" scoped>
.content-header {
  .zhuzi {
    width: 100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    > div {
      width: 10px;
      height: 30px;
      background-color: #9c6525;
    }
  }
  .header-countdown,
  .header-score-message {
    width: 200px;
    margin: auto;
    height: 50px;
    background-color: #9c6525;
    box-shadow: #5a370f 0px 2px 10px;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
  }
  .header-countdown :nth-child(1) {
    color: rgb(255, 165, 48);
  }
  .header-score-message {
    width: 250px;
  }
}
</style>
